<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .mylabel {
                margin-top: 8px;
                font-size: large;
                text-align: right;
            }

            .myerr {
                width: 80px;
                font-size: xx-small;
                color: red;
            }
        </style>
        <title>易购网-注册</title>
        <!-- 引入本地 Bootstrap 的 CSS 文件 -->
        <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
        <!-- 引入本地 Bootstrap 的 JavaScript 文件 -->
        <script th:src="@{/js/bootstrap.bundle.min.js}"></script>

    </head>
    <body class="bg-dark bg-opacity-10">
        <br>
        <div style="text-align: center">
            <form th:action="@{/store/enrol}" th:object="${usr}" method="post">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1 class="h3 mb-3 fw-normal">注 册 信 息
                                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </h1>
                            <hr>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1 mylabel"><span>帐&nbsp;&nbsp;&nbsp;号</span></div>
                        <div class="col-md-2">
                            <span th:errors="${usr.ucode}" class="myerr"></span>
                            <input th:type="text" th:name="ucode" th:placeholder="请输入账号" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1 mylabel"><span>密&nbsp;&nbsp;&nbsp;码</span></div>
                        <div class="col-md-2">
                            <input th:type="password" th:name="upassword" th:placeholder="请输入密码" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1 mylabel"><span>姓&nbsp;&nbsp;&nbsp;名</span></div>
                        <div class="col-md-2">
                            <span th:errors="*{uname}" class="myerr"></span>
                            <input th:type="text" th:name="uname" th:placeholder="请输入姓名" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1 mylabel"><span>性&nbsp;&nbsp;&nbsp;别</span></div>
                        <div class="col-md-2">
                            <select th:name="sex" class="form-control">
                                <option selected="selected" value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1 mylabel"><span>身份证</span></div>
                        <div class="col-md-2">
                            <input th:type="text" th:name="sfznum" th:placeholder="请输入身份证" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1 mylabel"><span>电&nbsp;&nbsp;&nbsp;话</span></div>
                        <div class="col-md-2"><input th:type="text" th:name="phone" th:placeholder="请输入电话" class="form-control"/></div>
                    </div>
                    <div class="row">
                        <div class="col-md-5"></div>
                        <div class="col-md-2">
                            <button class="w-100 btn btn-lg btn-primary" th:type="submit">
                                注&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp册
                            </button>
                        </div>
                    </div>
                </div>
                <p class="mt-5 mb-3 text-muted">&copy; 2024–2025 easybuy
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </p>
            </form>
        </div>

    </body>
</html>